<template>
  <el-dialog
    :title="props.title"
    @close="onClose"
    v-model="visible"
    width="1200px"
    :close-on-click-modal="false"
  >
    <div class="main">
      <!-- 预览 -->
      <div style="margin-right: 30px; flex-shrink: 0">
        <div>
          <!-- 抽奖页面预览 -->
          <content
            :list="dataList"
            :backgroundImg="formParams.backgroundImg ? formParams.backgroundImg : []"
            :buttonName="formParams.buttonName"
            ref="contentRef"
          />
        </div>
        <!-- 弹窗预览 -->
        <div style="margin-top: 20px">
          <el-button @click="isWinning = true">中奖反显图</el-button>
          <el-button @click="isWinning = false">未中奖反显图</el-button>
        </div>
        <div class="previewdialog">
          <!-- 中奖弹窗 -->
          <div
            class="previewdialog-content"
            :style="`background-image:url('${
              formParams.winPopupImageUrl?.length ? formParams.winPopupImageUrl[0]?.url : null
            }');`"
            v-show="isWinning"
          >
            <div class="coupon-wrapper">
              <div class="left" v-show="JSON.stringify(dataList[0]) !== '{}'">
                <div v-for="(item, index) in getName()" :key="index">{{ item }}</div>
              </div>
              <div class="img" v-show="JSON.stringify(dataList[0]) !== '{}'">
                <img
                  v-show="dataList[0]?.rewardImageUrl?.length"
                  :src="
                    dataList[0]?.rewardImageUrl?.length ? dataList[0]?.rewardImageUrl[0].url : null
                  "
                  alt=""
                />
              </div>
              <div class="right" v-show="JSON.stringify(dataList[0]) !== '{}'">
                <div class="name">{{ dataList[0]?.name }}</div>
                <div class="time" v-show="dataList[0]?.type !== 88"
                  >有效期至{{ dataList[0]?.endTime || '' }}</div
                >
                <div class="coupon-num" v-show="dataList[0]?.type === 88"
                  >恭喜获得{{ dataList[0]?.couponNum || '' }}张优惠券</div
                >
              </div>
            </div>
            <div class="button"> {{ formParams.winPopupBtn || '开心收下' }}</div>
          </div>
          <!-- 未中奖弹窗 -->
          <div
            v-show="!isWinning"
            class="previewdialog-content"
            :style="`background-image:url('${
              formParams.losePopupImageUrl?.length ? formParams.losePopupImageUrl[0]?.url : null
            }');`"
          >
            <div class="content-wrapper">
              <div>{{ formParams.losePopupText }}</div>
            </div>
            <div class="button"> {{ formParams.losePopupBtn || '再来一次' }}</div>
          </div>
        </div>
      </div>
      <div style="flex-shrink: 0">
        <div class="title">基本设置</div>
        <el-form :model="formParams" ref="formRef" :rules="rules" label-width="120px">
          <el-form-item label="活动名称" prop="name">
            <el-input
              v-model.trim="formParams.name"
              placeholder="最多10个字符"
              maxlength="10"
              clearable
              style="width: 240px"
              :disabled="props.title.includes('详情')"
            />
          </el-form-item>
          <el-form-item label="有效日期" prop="huodongshijian">
            <div>
              <el-date-picker
                style="width: 240px"
                v-model="formParams.huodongshijian"
                type="daterange"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :disabled="props.title.includes('详情')"
              />
            </div>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model.trim="formParams.remark"
              placeholder="最多20个字符"
              maxlength="20"
              clearable
              style="width: 240px"
              :disabled="props.title.includes('详情')"
            />
          </el-form-item>
          <el-form-item label="玩法说明" prop="activityRule">
            <div style="width: 100%">
              <el-input
                v-model="formParams.activityRule"
                style="width: 300px"
                :autosize="{ minRows: 3, maxRows: 8 }"
                type="textarea"
                maxlength="500"
                placeholder="请输入"
                show-word-limit
                :disabled="props.title.includes('详情')"
              />
            </div>
          </el-form-item>
          <el-form-item label="活动背景" prop="backgroundImg">
            <div
              ><ImageUploadByType
                v-model="formParams.backgroundImg"
                :isShowTip="false"
                uploadType="1"
                :limit="1"
                :fileSize="10"
                :disabled="props.title.includes('详情')"
                :imagePx="[750, 1264]"
              />图片的比例750px*1264px，请上传 大小不超过 10MB 格式为 png/jpg/jpeg 的文件</div
            >
          </el-form-item>
          <div style="margin-bottom: 10px"
            ><span style="color: red">*</span>抽奖条件设置（单订单满足任意条件即生效）</div
          >
          <el-form-item label="" prop="conditionPrice">
            <div style="width: 100%">
              单笔订单金额满
              <el-input-number
                @mousewheel.native.prevent
                :controls="false"
                style="width: 240px"
                v-model="formParams.conditionPrice"
                :max="9999"
                :min="0.01"
                :precision="2"
                controls-position="right"
                placeholder="最低0.01"
                :disabled="props.title.includes('详情')"
              />
              元
            </div>
          </el-form-item>
          <el-form-item label="" prop="conditionOrderQuantity">
            <div style="width: 100%">
              活动时间内满
              <el-input-number
                @mousewheel.native.prevent
                :controls="false"
                style="width: 240px"
                v-model="formParams.conditionOrderQuantity"
                :max="9999"
                :min="1"
                :precision="0"
                controls-position="right"
                placeholder="最低1"
                :disabled="props.title.includes('详情')"
              />
              笔
            </div>
          </el-form-item>
          <div style="margin-bottom: 10px"><span style="color: red">*</span>抽奖条件限制</div>
          <el-form-item label="" prop="conditionEverydayLottery">
            <div style="width: 100%">
              每日单人抽奖次数上限
              <el-input-number
                @mousewheel.native.prevent
                :controls="false"
                style="width: 240px"
                v-model="formParams.conditionEverydayLottery"
                :max="9999"
                :min="1"
                :precision="0"
                controls-position="right"
                placeholder="最低1"
                :disabled="props.title.includes('详情')"
                @change="
                  () => {
                    formParams.conditionTotalLottery =
                      formParams.conditionTotalLottery < formParams.conditionEverydayLottery
                        ? ''
                        : formParams.conditionTotalLottery
                  }
                "
              />
            </div>
          </el-form-item>
          <el-form-item label="" prop="conditionTotalLottery">
            <div style="width: 100%">
              活动期间单人总抽奖次数
              <el-input-number
                @mousewheel.native.prevent
                :controls="false"
                style="width: 240px"
                v-model="formParams.conditionTotalLottery"
                :max="9999"
                :min="formParams.conditionEverydayLottery"
                :precision="0"
                controls-position="right"
                placeholder="最低1"
                :disabled="props.title.includes('详情')"
              />
            </div>
          </el-form-item>
          <div class="title" style="margin: 10px 0">奖品配置</div>
          <el-table
            header-cell-class-name="table-row"
            v-loading="loading"
            size="small"
            index
            :data="dataList"
            style="border-bottom: none; background-color: #fff; --el-table-border-color: none"
          >
            <el-table-column
              label="奖品名称(弹窗名称)"
              align="center"
              min-width="130px"
              show-overflow-tooltip
              prop="name"
            >
              <template #default="{ row, $index }">
                <div class="datalist-name">
                  <el-link
                    :class="!row.name ? 'empty' : null"
                    :disabled="props.title.includes('详情')"
                    :underline="false"
                    type="primary"
                    @click="handleShowList($index)"
                    >{{ row.name || '添加优惠券' }}</el-link
                  >
                </div>
              </template>
            </el-table-column>
            <el-table-column label="奖品类型" align="center" prop="couponRemark">
              <template #default="{ row }">
                <div :class="!row.totalStock ? 'empty' : null">
                  {{ row.type === 6 ? '实物券' : row.type === 88 ? '礼包' : '优惠券' }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="活动总库存" min-width="100px" align="center">
              <template #header>
                <div><span style="color: red">*</span> 活动总库存</div>
              </template>
              <template #default="{ row }">
                <div :class="!row.totalStock ? 'empty' : null">
                  <el-input-number
                    :placeholder="row.surplusCount || ''"
                    :disabled="props.title.includes('详情')"
                    :controls="false"
                    style="width: 90px"
                    v-model="row.totalStock"
                    :min="1"
                    :max="row.surplusCount"
                    :precision="0"
                  />
                </div>
              </template>
            </el-table-column>
            <el-table-column
              v-if="!props.title.includes('详情')"
              label="剩余库存"
              align="center"
              prop="totalStock"
            />
            <el-table-column v-else label="剩余库存" align="center" prop="remainingStock" />
            <el-table-column label="中奖概率" min-width="130px" align="center">
              <template #header>
                <div><span style="color: red">*</span>中奖概率</div>
              </template>
              <template #default="{ row, $index }">
                <div
                  :class="!row.rewardProbability && row.rewardProbability !== 0 ? 'empty' : null"
                >
                  <el-input-number
                    :disabled="row.remainingStock <= 0 && props.title.includes('详情')"
                    :controls="false"
                    style="width: 90px"
                    v-model="row.rewardProbability"
                    :min="0"
                    :max="getMaxPercentage($index)"
                    :precision="0"
                  />
                  %
                </div>
              </template>
            </el-table-column>
            <el-table-column label="奖品缩略图" min-width="120px" align="center">
              <template #header>
                <div><span style="color: red">*</span>奖品缩略图</div>
              </template>
              <template #default="{ row }">
                <div
                  :class="!row.rewardImageUrl ? 'empty' : null"
                  style="display: flex; flex-direction: column; align-items: center"
                >
                  <ImageUploadByType
                    custom
                    v-model="row.rewardImageUrl"
                    :isShowTip="false"
                    uploadType="1"
                    :limit="1"
                    :fileSize="1"
                    :disabled="props.title.includes('详情')"
                    :imagePx="[204, 148]"
                  />204px*148px 1M
                  <div style="color: red" v-show="!row.rewardImageUrl">请上传奖品缩略图</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center">
              <template #default="{ $index }">
                <el-button
                  :disabled="props.title.includes('详情')"
                  v-show="dataList.length > 1"
                  @click="handleDelete($index)"
                  icon="Minus"
                  circle
                />
              </template>
            </el-table-column>
          </el-table>
          <div
            class="add"
            v-show="dataList.length < 7 && !props.title.includes('详情')"
            @click="handleAdd"
          >
            <el-icon class="avatar-uploader-icon"><plus /></el-icon>
            <div>添加</div>
          </div>
          <div class="title">弹窗设置</div>
          <el-form-item label="中奖弹窗" prop="winPopupImageUrl">
            <div
              >上传弹窗图片
              <ImageUploadByType
                v-model="formParams.winPopupImageUrl"
                :isShowTip="false"
                uploadType="1"
                :limit="1"
                :fileSize="3"
                :disabled="props.title.includes('详情')"
                :imagePx="[592, 840]"
              />图片的比例592px*840px，请上传 大小不超过 3MB 格式为 png/jpg/jpeg 的文件</div
            >
          </el-form-item>
          <el-form-item label="" prop="winPopupBtn">
            <div
              >自定义按钮：中奖情况
              <el-input
                :disabled="props.title.includes('详情')"
                v-model.trim="formParams.winPopupBtn"
                placeholder="开心收下"
                maxlength="10"
                clearable
                style="width: 240px"
            /></div>
          </el-form-item>
          <el-form-item label="未中奖弹窗" prop="losePopupImageUrl">
            <div
              >上传弹窗图片
              <ImageUploadByType
                :disabled="props.title.includes('详情')"
                v-model="formParams.losePopupImageUrl"
                :isShowTip="false"
                uploadType="1"
                :limit="1"
                :fileSize="3"
                :imagePx="[592, 840]"
              />图片的比例592px*840px，请上传 大小不超过 3MB 格式为 png/jpg/jpeg 的文件</div
            >
          </el-form-item>
          <el-form-item label="" prop="losePopupText">
            <div
              >文本文案
              <el-input
                :disabled="props.title.includes('详情')"
                v-model.trim="formParams.losePopupText"
                placeholder="很遗憾,您没有中奖"
                maxlength="20"
                clearable
                style="width: 240px"
            /></div>
          </el-form-item>
          <el-form-item label="" prop="losePopupBtn">
            <div
              >自定义按钮：未中奖情况
              <el-input
                :disabled="props.title.includes('详情')"
                v-model.trim="formParams.losePopupBtn"
                placeholder="再来一次"
                maxlength="10"
                clearable
                style="width: 240px"
            /></div>
          </el-form-item>
          <div class="title">分享设置</div>
          <el-form-item label="分享标题" prop="shareTitle">
            <el-input
              :disabled="props.title.includes('详情')"
              v-model.trim="formParams.shareTitle"
              placeholder="请输入标题名称，最多20字"
              maxlength="20"
              clearable
              style="width: 240px"
            />
          </el-form-item>
          <el-form-item label="上传图片" prop="shareImg">
            <div
              ><ImageUploadByType
                :disabled="props.title.includes('详情')"
                v-model="formParams.shareImg"
                :isShowTip="false"
                uploadType="1"
                :limit="1"
                :fileSize="10"
                validateAspectRatio5To4
              />请上传 大小不超过 10MB 格式为 png/jpg/jpeg 的文件 图片的比例为5:4,
              如500px*400px</div
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <template #footer>
      <el-button :loading="submit" type="primary" @click="handleAction(true)"> 保存 </el-button>
      <el-button @click="handleAction(false)">取消</el-button>
    </template>

    <!-- 选择奖品 -->
    <couponList ref="couponListRef" @select="handleSelect" />
  </el-dialog>
</template>

<script setup>
import content from './content.vue'
import couponList from './couponList.vue'
import { addRaffleApi, getRaffleDetailApi, updateRaffleApi } from '@/api/marketing/raffle'
import { formatTexarea } from '@/utils/tools'
import { ElMessage } from 'element-plus'

const props = defineProps({
  title: {
    type: String,
    default: null
  }
})
const emit = defineEmits(['refresh'])

const formRef = ref(null)
const couponListRef = ref(null)
const submit = ref(false)

// 奖品列表
const dataList = ref([])
// true中奖弹窗 false未中奖弹窗
const isWinning = ref(true)

const visible = ref(false)

const formParams = reactive({
  name: null,
  remark: null,
  huodongshijian: null,
  backgroundImg: null,
  activityRule: null,
  conditionPrice: null,
  conditionOrderQuantity: null,
  conditionEverydayLottery: null,
  conditionTotalLottery: null,
  winPopupBtn: null,
  losePopupBtn: null,
  losePopupText: null,
  winPopupImageUrl: null,
  losePopupImageUrl: null,
  shareTitle: null,
  shareImg: null,
  cityName: null
})

const rules = {
  name: [{ required: true, message: '活动名称不能为空', trigger: 'blur' }],
  huodongshijian: [{ required: true, message: '请选择活动时间', trigger: 'change' }],
  backgroundImg: [{ required: true, message: '请上传活动背景图', trigger: 'change' }],
  activityRule: [{ required: true, message: '请输入玩法说明', trigger: 'blur' }],
  conditionPrice: [{ required: true, message: '请输入', trigger: 'blur' }],
  conditionOrderQuantity: [{ required: true, message: '请输入', trigger: 'blur' }],
  conditionEverydayLottery: [{ required: true, message: '请输入', trigger: 'blur' }],
  conditionTotalLottery: [{ required: true, message: '请输入', trigger: 'blur' }],
  winPopupBtn: [{ required: true, message: '请输入', trigger: 'blur' }],
  losePopupBtn: [{ required: true, message: '请输入', trigger: 'blur' }],
  losePopupText: [{ required: true, message: '请输入', trigger: 'blur' }],
  winPopupImageUrl: [{ required: true, message: '请上传中奖弹窗', trigger: 'change' }],
  losePopupImageUrl: [{ required: true, message: '请上传未中奖弹窗', trigger: 'change' }],
  shareTitle: [{ required: true, message: '请输入分享标题', trigger: 'blur' }],
  shareImg: [{ required: true, message: '请上传图片', trigger: 'change' }]
}

// 获取最大中奖概率百分比
function getMaxPercentage(index) {
  const arr = dataList.value.filter((i, j) => j !== index && i.rewardProbability)
  let sum = arr.length ? arr.reduce((acc, cur) => acc + cur.rewardProbability, 0) : 0
  return 100 - sum
}

// 奖品类型
function getName() {
  return dataList.value.length && dataList.value[0]?.type === 6
    ? '实物券'
    : dataList.value[0]?.type === 88
    ? '礼包'
    : '优惠券'
}

function onClose() {
  formRef.value.resetFields()
  dataList.value = []
  Object.keys(formParams).forEach((key) => {
    formParams[key] = null
  })
  dataList.value = []
  visible.value = false
}

// 选择优惠券
const curIndex = ref(0)
function handleShowList(index) {
  curIndex.value = index
  couponListRef.value.init([dataList.value[index]], formParams.cityName)
}
// 选择优惠券
function handleSelect(val) {
  const obj = {
    rewardProbability: null,
    totalStock: null
  }
  dataList.value[curIndex.value] = {
    ...dataList.value[curIndex.value],
    ...val
  }
  if (dataList.value[curIndex.value]?.id !== val.id) {
    dataList.value[curIndex.value] = {
      ...val,
      ...obj
    }
  }
}

// 添加奖品
function handleAdd() {
  dataList.value.push({
    receiveCount: '',
    surplusCount: '',
    name: null,
    rewardImageUrl: null,
    rewardProbability: null
  })
}
// 删除奖品
function handleDelete(index) {
  dataList.value.splice(index, 1)
}

// 校验是否可以提交或者切换页码
function handleCheck() {
  dataList.value.forEach((i) => {
    if (!i.totalStock) {
      i.empty = true
      i.message = '请填写活动总库存'
    } else if (!i.rewardProbability && i.rewardProbability !== 0) {
      i.empty = true
      i.message = '请填写中奖概率'
    } else if (!i.rewardImageUrl?.length) {
      i.empty = true
      i.message = '请上传奖品缩略图'
    } else if (!i.name) {
      i.empty = true
      i.message = '请选择活动'
    } else {
      i.empty = false
    }
  })
  return dataList.value.find((i) => {
    return i.empty
  })
}

// 取消 保存
function handleAction(confirm) {
  console.log('formParams.value', formParams)
  if (confirm) {
    submit.value = true
    formRef.value?.validate((valid) => {
      if (valid) {
        if (!dataList.value.length) {
          submit.value = false
          ElMessage.error('请配置奖品')
          return
        }
        if (handleCheck()) {
          submit.value = false
          ElMessage.error(handleCheck()?.message)
          return
        }
        // 文本与内容转换成html标签
        const params = { ...formParams }

        // 活动时间
        params.startTime = formParams.huodongshijian?.length
          ? formParams.huodongshijian[0] + ' 00:00:00'
          : null
        params.endTime = formParams.huodongshijian?.length
          ? formParams.huodongshijian[1] + ' 23:59:59'
          : null

        // 活动背景
        params.backgroundImg = params.backgroundImg[0].url
        // 玩法说明
        params.activityRule = formatTexarea(formParams.activityRule)
        // 中奖弹窗
        params.winPopupImageUrl = params.winPopupImageUrl[0].url
        // 未中奖弹窗
        params.losePopupImageUrl = params.losePopupImageUrl[0].url

        params.lotteryRecordsRewardList = dataList.value.map((i) => {
          const { id, grantNum, type, totalStock, rewardProbability, rewardImageUrl, name } = i
          return {
            id,
            rewardType: type,
            rewardId: id,
            distributionQuantity: grantNum,
            totalStock,
            remainingStock: totalStock,
            rewardProbability,
            rewardImageUrl: rewardImageUrl[0].url,
            name
          }
        })

        // 分享背景
        params.shareImg = params.shareImg[0].url
        delete params.huodongshijian
        if (props.title.includes('详情')) {
          updateRaffleApi(params)
            .then((res) => {
              submit.value = false
              visible.value = false
              emit('refresh')
              ElMessage({
                message: '编辑成功',
                type: 'success'
              })
            })
            .catch((err) => {
              if (err?.code === 213) {
                ElMessage({
                  message: err?.msg,
                  type: 'error'
                })
              }
              submit.value = false
            })
          return
        }
        addRaffleApi(params)
          .then((res) => {
            submit.value = false
            visible.value = false
            emit('refresh')
            ElMessage({
              message: '新建成功',
              type: 'success'
            })
          })
          .catch((err) => {
            if (err?.code === 213) {
              ElMessage({
                message: err?.msg,
                type: 'error'
              })
            }
            submit.value = false
          })
      } else {
        ElMessage({
          message: '提交失败，请校验数据',
          type: 'error'
        })
        submit.value = false
      }
    })
  } else {
    onClose()
  }
}

// 初始化
function init(cityName, id) {
  formParams.id = id
  formParams.cityName = cityName
  if (id) {
    // 编辑
    getRaffleDetailApi(id).then((res) => {
      initDeatil(res.data || {})
      visible.value = true
    })
    return
  }
  visible.value = true
}

function initDeatil(detail) {
  Object.keys(detail).map((i) => {
    formParams[i] = detail[i]
  })

  formParams.huodongshijian = [detail.startTime, detail.endTime]
  formParams.backgroundImg = [{ url: detail.backgroundImg }]
  formParams.activityRule = formatTexarea(detail.activityRule, 1)
  formParams.winPopupImageUrl = [{ url: detail.winPopupImageUrl }]
  formParams.losePopupImageUrl = [{ url: detail.losePopupImageUrl }]
  dataList.value = detail.lotteryRecordsRewardList.map((i) => {
    const { rewardType, distributionQuantity, rewardImageUrl } = i
    return {
      ...i,
      type: rewardType,
      grantNum: distributionQuantity,
      rewardImageUrl: [{ url: rewardImageUrl }]
    }
  })
  formParams.shareImg = [{ url: detail.shareImg }]
  console.log('dataList.value', dataList.value)
}

defineExpose({
  init
})
</script>

<style lang="scss" scoped>
:deep(.el-dialog__body) {
  padding: 0 10px 0 !important;
}
.main {
  position: relative;
  display: flex;
  justify-content: space-between;
  .title {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 600;
  }
  .textarea-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .textarea-info {
    line-height: 18px;
  }
  .upload-wrapper {
    display: flex;
    align-items: start;
  }
  .el-checkbox.el-checkbox--large {
    height: 32px;
  }
}
.el-radio-group .el-radio {
  width: 100%;
}
::v-deep .el-upload-list__item {
  transition: none !important;
}
.add {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40px;
  border: 1px dashed #dcdfe6;
  margin-bottom: 10px;
}
:deep(.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th) {
  background-color: #fff !important;
}

// 弹窗预览
.previewdialog {
  background-image: url('https://qafanle.oss-cn-hangzhou.aliyuncs.com/img/2025/01/02/抽奖_20250102103904A277.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 375px;
  height: 812px;
  margin-top: 20px;
  position: relative;
  .previewdialog-content {
    position: absolute;
    top: 150px;
    left: 40px;
    width: 296px;
    height: 420px;
    padding: 156px 19px 186px 19px;
    flex-direction: column;
    align-items: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .content-wrapper {
      width: 258px;
      height: 78px;
      border-radius: 10px;
      border: 1px solid #8adf4b;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #488b16;
      text-align: center;
      font-family: 'PingFang SC';
      font-size: 18px;
      font-style: normal;
      font-weight: 500;
      padding: 0 30px;
    }
    .coupon-wrapper {
      width: 258px;
      height: 78px;
      border-radius: 10px;
      border: 1px solid #8adf4b;
      background: #fff;
      display: flex;
      align-items: center;
      .left {
        border-radius: 10px 0 0 10px;
        background: #8adf4b;
        position: relative;
        left: 0;
        top: 0;
        width: 21px;
        height: 78px;
        padding: 7px 0;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        color: #fff;
        font-family: 'PingFang SC';
        font-size: 13px;
        font-style: normal;
        font-weight: 400;
      }
      .img {
        width: 62px;
        height: 45px;
        margin: 0 8px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .name {
        max-width: 147px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-bottom: 6px;
        text-align: left;
        height: 20px;
        line-height: 20px;
        color: #000;
        font-family: 'PingFang SC';
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
      }
      .time {
        padding: 2px 8px;
        width: 147px;
        height: 18px;
        border-radius: 4px;
        background: #eafbdd;
        color: rgba(0, 0, 0, 0.5);
        font-family: 'PingFang SC';
        font-size: 10px;
        font-style: normal;
        font-weight: 400;
      }
      .coupon-num {
        background: #fff5e1;
        color: #a7710e;
        font-family: 'PingFang SC';
        font-size: 10px;
        font-style: normal;
        font-weight: 400;
        width: 102px;
        text-align: center;
      }
    }
    .img {
      width: 100%;
      height: 100%;
    }
    .button {
      min-width: 168px;
      height: 43px;
      line-height: 43px;
      color: #fff;
      font-family: 'PingFang SC';
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      padding: 0 10px;
      text-align: center;
      border-radius: 27px;
      background: #8adf4b;
      margin-top: 113px;
    }
  }
}
:deep(.empty .el-input__wrapper) {
  border: 1px solid red;
}
.datalist-name {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
